<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon" />
    <!-- 字体图标 -->
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="assets/css/styles.css" />
    <title>盆栽官网</title>
  </head>
  <body>
    <!-- header -->
    <header id="header" class="header">
      <nav class="nav container">
        <a href="#" class="nav-logo">
          <i class="ri-leaf-line nav-logo-icon"></i>
          Plantex
        </a>

        <div id="nav-menu" class="nav-menu">
          <ul class="nav-list">
            <li class="nav-item">
              <a href="#home" class="nav-link active-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#about" class="nav-link">About</a>
            </li>
            <li class="nav-item">
              <a href="#products" class="nav-link">Products</a>
            </li>
            <li class="nav-item">
              <a href="#faqs" class="nav-link">FAQs</a>
            </li>
            <li class="nav-item">
              <a href="#contact" class="nav-link">Contact Us</a>
            </li>
          </ul>

          <div id="nav-close" class="nav-close">
            <i class="ri-close-line"></i>
          </div>
        </div>

        <div class="nav-btns">
          <i class="ri-moon-line change-theme" id="theme-button"></i>

          <div id="nav-toggle" class="nav-toggle">
            <i class="ri-menu-line"></i>
          </div>
        </div>
      </nav>
    </header>

    <div class="main">
      <!-- home -->
      <section class="home" id="home">
        <div class="home-container container grid">
          <img src="assets/img/home.png" alt="" class="home-img" />

          <div class="home-data">
            <h1 class="home-title">
              Plants will make
              <br />
              your life better
            </h1>
            <p class="home-description">
              Create incredible plant design for your offices or apastaments. Add fresness to your
              new ideas.
            </p>
            <a href="#about" class="button button-flex">
              Explore
              <i class="ri-arrow-right-down-line button-icon"></i>
            </a>
          </div>

          <div class="home-social">
            <span class="home-social-follow">Follow Us</span>

            <div class="home-social-links">
              <a href="https://www.facebook.com/" target="_blank" class="home-social-link">
                <i class="ri-facebook-fill"></i>
              </a>
              <a href="https://www.instagram.com/" target="_blank" class="home-social-link">
                <i class="ri-instagram-line"></i>
              </a>
              <a href="https://twitter.com/" target="_blank" class="home-social-link">
                <i class="ri-twitter-fill"></i>
              </a>
            </div>
          </div>
        </div>
      </section>

      <!--==================== ABOUT ====================-->
      <section class="about section container" id="about">
        <div class="about-container grid">
          <img src="assets/img/about.png" alt="" class="about-img" />

          <div class="about-data">
            <h2 class="section-title about-title">
              Who we really are &
              <br />
              why choose us
            </h2>

            <p class="about-description">
              We have over 4000+ unbiased reviews and our customers trust our plant process and
              delivery service every time
            </p>

            <div class="about-details">
              <p class="about-details-description">
                <i class="ri-checkbox-fill about-details-icon"></i>
                We always deliver on time.
              </p>
              <p class="about-details-description">
                <i class="ri-checkbox-fill about-details-icon"></i>
                We give you guides to protect and care for your plants.
              </p>
              <p class="about-details-description">
                <i class="ri-checkbox-fill about-details-icon"></i>
                We always come over for a check-up after sale.
              </p>
              <p class="about-details-description">
                <i class="ri-checkbox-fill about-details-icon"></i>
                100% money back guaranteed.
              </p>
            </div>

            <a href="#" class="button-link button-flex">
              Shop Now
              <i class="ri-arrow-right-down-line button-icon"></i>
            </a>
          </div>
        </div>
      </section>

      <!--==================== STEPS ====================-->
      <section class="steps section container">
        <div class="steps-bg">
          <h2 class="section-title-center steps-title">
            Steps to start your
            <br />
            plants off right
          </h2>

          <div class="steps-container grid">
            <div class="steps-card">
              <div class="steps-card-number">01</div>
              <h3 class="steps-card-title">Choose Plant</h3>
              <p class="steps-card-description">
                We have several varieties plants you can choose from.
              </p>
            </div>

            <div class="steps-card">
              <div class="steps-card-number">02</div>
              <h3 class="steps-card-title">Place an order</h3>
              <p class="steps-card-description">
                Once your order is set, we move to the next step which is the shipping.
              </p>
            </div>

            <div class="steps-card">
              <div class="steps-card-number">03</div>
              <h3 class="steps-card-title">Get plants delivered</h3>
              <p class="steps-card-description">
                Our delivery process is easy, you receive the plant direct to your door.
              </p>
            </div>
          </div>
        </div>
      </section>

      <!--==================== PRODUCTS ====================-->
      <section class="product section container" id="products">
        <h2 class="section-title-center">
          Check out our
          <br />
          products
        </h2>

        <p class="product-description">
          Here are some selected plants from our showroom, all are in excellent shape and has a long
          life span. Buy and enjoy best quality.
        </p>

        <div class="product-container grid">
          <article class="product-card">
            <div class="product-circle"></div>

            <img src="assets/img/product1.png" alt="" class="product-img" />

            <h3 class="product-title">Cacti Plant</h3>
            <span class="product-price">$19.99</span>

            <button class="button-flex product-button">
              <i class="ri-shopping-bag-line"></i>
            </button>
          </article>

          <article class="product-card">
            <div class="product-circle"></div>

            <img src="assets/img/product2.png" alt="" class="product-img" />

            <h3 class="product-title">Cactus Plant</h3>
            <span class="product-price">$11.99</span>

            <button class="button-flex product-button">
              <i class="ri-shopping-bag-line"></i>
            </button>
          </article>

          <article class="product-card">
            <div class="product-circle"></div>

            <img src="assets/img/product3.png" alt="" class="product-img" />

            <h3 class="product-title">Aloe Vera Plant</h3>
            <span class="product-price">$7.99</span>

            <button class="button-flex product-button">
              <i class="ri-shopping-bag-line"></i>
            </button>
          </article>

          <article class="product-card">
            <div class="product-circle"></div>

            <img src="assets/img/product4.png" alt="" class="product-img" />

            <h3 class="product-title">Succulent Plant</h3>
            <span class="product-price">$5.99</span>

            <button class="button-flex product-button">
              <i class="ri-shopping-bag-line"></i>
            </button>
          </article>

          <article class="product-card">
            <div class="product-circle"></div>

            <img src="assets/img/product5.png" alt="" class="product-img" />

            <h3 class="product-title">Succulent Plant</h3>
            <span class="product-price">$10.99</span>

            <button class="button-flex product-button">
              <i class="ri-shopping-bag-line"></i>
            </button>
          </article>

          <article class="product-card">
            <div class="product-circle"></div>

            <img src="assets/img/product6.png" alt="" class="product-img" />

            <h3 class="product-title">Green Plant</h3>
            <span class="product-price">$8.99</span>

            <button class="button-flex product-button">
              <i class="ri-shopping-bag-line"></i>
            </button>
          </article>
        </div>
      </section>

      <!--==================== QUESTIONS ====================-->
      <section class="questions section" id="faqs">
        <h2 class="section-title-center questions-title container">
          Some common questions
          <br />
          were often asked
        </h2>

        <div class="questions-container container grid">
          <div class="questions-group">
            <div class="questions-item">
              <header class="questions-header">
                <i class="ri-add-line questions-icon"></i>
                <h3 class="questions-item-title">My flowers are falling off or dying?</h3>
              </header>

              <div class="questions-content">
                <p class="questions-description">
                  Plants are easy way to add color energy and transform your space but which planet
                  is for you. Choosing the right plant.
                </p>
              </div>
            </div>

            <div class="questions-item">
              <header class="questions-header">
                <i class="ri-add-line questions-icon"></i>
                <h3 class="questions-item-title">What causes leaves to become pale?</h3>
              </header>

              <div class="questions-content">
                <p class="questions-description">
                  Plants are easy way to add color energy and transform your space but which planet
                  is for you. Choosing the right plant.
                </p>
              </div>
            </div>

            <div class="questions-item">
              <header class="questions-header">
                <i class="ri-add-line questions-icon"></i>
                <h3 class="questions-item-title">What causes brown crispy leaves?</h3>
              </header>

              <div class="questions-content">
                <p class="questions-description">
                  Plants are easy way to add color energy and transform your space but which planet
                  is for you. Choosing the right plant.
                </p>
              </div>
            </div>
          </div>

          <div class="questions-group">
            <div class="questions-item">
              <header class="questions-header">
                <i class="ri-add-line questions-icon"></i>
                <h3 class="questions-item-title">How do i choose a plant?</h3>
              </header>

              <div class="questions-content">
                <p class="questions-description">
                  Plants are easy way to add color energy and transform your space but which planet
                  is for you. Choosing the right plant.
                </p>
              </div>
            </div>

            <div class="questions-item">
              <header class="questions-header">
                <i class="ri-add-line questions-icon"></i>
                <h3 class="questions-item-title">How do I change the pots?</h3>
              </header>

              <div class="questions-content">
                <p class="questions-description">
                  Plants are easy way to add color energy and transform your space but which planet
                  is for you. Choosing the right plant.
                </p>
              </div>
            </div>

            <div class="questions-item">
              <header class="questions-header">
                <i class="ri-add-line questions-icon"></i>
                <h3 class="questions-item-title">Why are gnats flying around my plant?</h3>
              </header>

              <div class="questions-content">
                <p class="questions-description">
                  Plants are easy way to add color energy and transform your space but which planet
                  is for you. Choosing the right plant.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--==================== CONTACT ====================-->
      <section class="contact section container" id="contact">
        <div class="contact-container grid">
          <div class="contact-box">
            <h2 class="section-title">
              Reach out to us today
              <br />
              via any of the given
              <br />
              information
            </h2>

            <div class="contact-data">
              <div class="contact-information">
                <h3 class="contact-subtitle">Call us for instant support</h3>
                <span class="contact-description">
                  <i class="ri-phone-line contact-icon"></i>
                  +999 888 777
                </span>
              </div>

              <div class="contact-information">
                <h3 class="contact-subtitle">Write us by mail</h3>
                <span class="contact-description">
                  <i class="ri-mail-line contact-icon"></i>
                  user@email.com
                </span>
              </div>
            </div>
          </div>

          <form action="" class="contact-form">
            <div class="contact-inputs">
              <div class="contact-content">
                <input type="email" placeholder=" " class="contact-input" />
                <label for="" class="contact-label">Email</label>
              </div>

              <div class="contact-content">
                <input type="text" placeholder=" " class="contact-input" />
                <label for="" class="contact-label">Subject</label>
              </div>

              <div class="contact-content contact-area">
                <textarea name="message" placeholder=" " class="contact-input"></textarea>
                <label for="" class="contact-label">Message</label>
              </div>
            </div>

            <button class="button button-flex">
              Send Message
              <i class="ri-arrow-right-up-line button-icon"></i>
            </button>
          </form>
        </div>
      </section>
    </div>

    <!--==================== FOOTER ====================-->
    <footer class="footer section">
      <div class="footer-container container grid">
        <div class="footer-content">
          <a href="#" class="footer-logo">
            <i class="ri-leaf-line footer-logo-icon"></i>
            Plantex
          </a>

          <h3 class="footer-title">
            Subscribe to our newsletter
            <br />
            to stay update
          </h3>

          <div class="footer-subscribe">
            <input type="email" placeholder="Enter your email" class="footer-input" />

            <button class="button button--flex footer-button">
              Subscribe
              <i class="ri-arrow-right-up-line button-icon"></i>
            </button>
          </div>
        </div>

        <div class="footer-content">
          <h3 class="footer-title">Our Address</h3>

          <ul class="footer-data">
            <li class="footer-information">1234 - Peru</li>
            <li class="footer-information">La Libertad - 43210</li>
            <li class="footer-information">123-456-789</li>
          </ul>
        </div>

        <div class="footer-content">
          <h3 class="footer-title">Contact Us</h3>

          <ul class="footer-data">
            <li class="footer-information">+999 888 777</li>

            <div class="footer-social">
              <a href="https://www.facebook.com/" class="footer-social-link">
                <i class="ri-facebook-fill"></i>
              </a>
              <a href="https://www.instagram.com/" class="footer-social-link">
                <i class="ri-instagram-line"></i>
              </a>
              <a href="https://twitter.com/" class="footer-social-link">
                <i class="ri-twitter-fill"></i>
              </a>
            </div>
          </ul>
        </div>

        <div class="footer-content">
          <h3 class="footer-title">We accept all credit cards</h3>

          <div class="footer-cards">
            <img src="assets/img/card1.png" alt="" class="footer-card" />
            <img src="assets/img/card2.png" alt="" class="footer-card" />
            <img src="assets/img/card3.png" alt="" class="footer-card" />
            <img src="assets/img/card4.png" alt="" class="footer-card" />
          </div>
        </div>
      </div>

      <p class="footer-copy">&#169; Jetwang. All rigths reserved</p>
    </footer>

    <!--=============== SCROLL UP ===============-->
    <a href="#" class="scrollup" id="scroll-up">
      <i class="ri-arrow-up-fill scrollup-icon"></i>
    </a>

    <script src="assets/js/scrollreveal.min.js"></script>
    <script src="assets/js/main.js"></script>
  </body>
</html>
